Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: namananand/ins 3605 add realease switch dropdown, share and delete button to view pipeline page #942

Conversation

iamnamananand996
Copy link
Contributor

Because

  • add realease switch dropdown, share and delete button to view pipeline page

This commit

  • add realease switch dropdown, share and delete button to view pipeline page

Copy link

linear bot commented Feb 7, 2024

Copy link

vercel bot commented Feb 7, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
instill-form-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 15, 2024 2:06pm

@iamnamananand996 iamnamananand996 changed the title feat: namananand/ins 3605, ins 3606, ins 3607 add realease switch dropdown, share and delete button to view pipeline page feat: namananand/ins 3605 add realease switch dropdown, share and delete button to view pipeline page Feb 7, 2024
Copy link

github-actions bot commented Feb 7, 2024

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 1.82 MB (🟢 1.08 KB)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

@EiffelFly
Copy link
Member

EiffelFly commented Feb 7, 2024

@iamnamananand996 There are several issues in the implementation

  1. The ReadOnlyPipelineBuilderWithVersion component is duplicated, due to the ReadOnlyPipelineBuilder already expose the recipe and metadata and two of them are near identical
  2. I understand this implementation is due to your want to leverage the currentVersion but I will suggest you not to do that due to it has some sideeffect which only make sense in the pipeline-builder edit mode
  3. The ideal flow will be an isolated state that only exist in the ViewPipeline and its corresponding component, and the ReadOnlyPipelineBuilder recipe and metadata will respond to the user selected version
  4. The version dropdown can not be closed when I click outside of it.
  5. When I delete the pipeline on the /pipelines/pid page, it didn't redirect me to /pipelines page which make the whole flow buggy

Here is the UI deviation part

  1. The version dropdown padding deviates from design
  2. The default state of the dropdown's paddingX deviates from the design
  3. The right eclipse button's dropdown padding deviates from the design

Please makes sure the deviations is taken care, we really want to 100% align with the design. Also make sure you test the UX interaction before submitting the PR

Copy link

github-actions bot commented Feb 7, 2024

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 1.82 MB (🟢 1.49 KB)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Copy link

github-actions bot commented Feb 7, 2024

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 1.83 MB (🟢 3.52 KB)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

@iamnamananand996
Copy link
Contributor Author

Hi @EiffelFly, updated the suggested changes

Copy link

github-actions bot commented Feb 7, 2024

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 1.82 MB (🟢 2.22 KB)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Copy link

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page Size (compressed)
global 1.82 MB (🟢 -350 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

@EiffelFly
Copy link
Member

EiffelFly commented Feb 14, 2024

@iamnamananand996 I think the implementation functionality and code quality is good. But there are some minor UX and UX issue

  1. When user select the version we should close the popover
  2. The blue dot should be 8px width and height according to the design handover. And it should not be compressed
    CleanShot 2024-02-14 at 16 43 54
  3. When the popover is selected and open the input style should be different. You can see that the border is a gray color when user open the popover
    CleanShot 2024-02-14 at 16 45 07
  4. The popover width should be as the same width of the popover trigger (ref)

Please fix these issues accordingly

Copy link

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page Size (compressed)
global 1.83 MB (-67 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

@iamnamananand996
Copy link
Contributor Author

Hi @EiffelFly , updated the changes

Copy link

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page Size (compressed)
global 1.83 MB (🟢 -211 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Copy link

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 1.82 MB (🟢 718 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Copy link

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 1.83 MB (🟢 2.6 KB)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Copy link

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 1.83 MB (🟢 1.5 KB)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

EiffelFly
EiffelFly previously approved these changes Feb 15, 2024
Copy link
Member

@EiffelFly EiffelFly left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

<Tag
size="sm"
variant="darkPurple"
className="h-[24px] gap-x-2"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iamnamananand996 Please prevent using arbitrary value when there is fixed token for it

h-6 = h-[24px]

side="top"
sideOffset={4}
align="start"
className="PopoverContent flex h-[180px] w-[142px] flex-col !rounded-[8px] !p-0"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PopoverContent this className is not necessary, And we also have rounded-sm to represent rounded-[8px]

@EiffelFly EiffelFly force-pushed the namananand/ins-3605-add-realease-switch-dropdown-to-view-pipeline-page branch from 8d3fbb5 to ecdf3e5 Compare February 15, 2024 13:52
Copy link

📦 Next.js Bundle Analysis for instillai-console

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 1.83 MB (🟢 2.12 KB)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

@EiffelFly EiffelFly merged commit a96bf9f into main Feb 15, 2024
11 checks passed
@EiffelFly EiffelFly deleted the namananand/ins-3605-add-realease-switch-dropdown-to-view-pipeline-page branch February 15, 2024 14:09
@droplet-bot droplet-bot mentioned this pull request Feb 15, 2024
EiffelFly pushed a commit that referenced this pull request Feb 16, 2024
🤖 I have created a release *beep* *boop*
---


<details><summary>0.39.0-beta</summary>

##
[0.39.0-beta](v0.38.0-beta...v0.39.0-beta)
(2024-02-15)


### Features

* adapt new backend breaking changes about mgmt backend
([#940](#940))
([3351262](3351262))
* add SubscriptionStatus to sdk
([#964](#964))
([f5e67ba](f5e67ba))
* add trial_end field into StripeSubscriptionDetail
([#965](#965))
([7b7324b](7b7324b))
* **auto-gen-form:** handle Airbyte form and instill data form
separately ([#956](#956))
([23ce0eb](23ce0eb))
* **pipeline-builder:** copy & paste full reference with ${} instead of
path only ([#967](#967))
([231ac2f](231ac2f))
* **pipeline-builder:** implement the layered flow of smart hint
([#934](#934))
([69dc912](69dc912))
* **pipeline-builder:** implement the new array data type label design
([#957](#957))
([0c6ef4e](0c6ef4e))
* **pipeline-builder:** replace semi-structured/object with
semi-structured/json on start operator
([#954](#954))
([df71434](df71434))
* **pipeline-builder:** support hinting other type that can be
stringified ([#949](#949))
([c0c8892](c0c8892))
* **pipeline-builder:** support video/multiple-video in pipeline builder
([#943](#943))
([2680f70](2680f70))
* **pipeline-builder:** unify the onEdit and onDelete item on both start
and end operator
([#936](#936))
([d70120f](d70120f))
* **instill-hub:** User can reset visibility filter to display all
pipelines ([#947](#947))
([1ba36a0](1ba36a0))
* **instill-hub:** User can switch between different version on pipeline
details page([#942](#942))
([a96bf9f](a96bf9f))
* support the backend breaking changes of icon path
([#959](#959))
([e7d7ad3](e7d7ad3))

### Bug Fixes

* **dashboard:** chart yAxis calculation
([#929](#929))
([56e9d11](56e9d11))
* fix connector definition not correctly update after user picking up
the existing connector
([#935](#935))
([08ef854](08ef854))
* fix console wrongly warn field not supporting multiple references
([#948](#948))
([3c029e4](3c029e4))
* fix create pipeline dialog use the wrong entity as query param
([#951](#951))
([20d0793](20d0793))
* fix dashboard font-family issue
([#955](#955))
([4028d53](4028d53))
* fix not correctly redirect user to 404 page when the entity is not
found ([#950](#950))
([898acba](898acba))
* fix not redirect non exist user page to 404
([#941](#941))
([86a823f](86a823f))
* fix reference data type tags are not human readable issue
([#960](#960))
([55d315c](55d315c))
* fix stripe subscription detail is not nullable issue
([#966](#966))
([78d903b](78d903b))
* fix the button title for multiple videos uploader at start operator
([#961](#961))
([29a25ab](29a25ab))
* fix the wrong delete organization function parameter
([#952](#952))
([8e2d89f](8e2d89f))
* fix the wrong organization profile object
([#946](#946))
([1f9780b](1f9780b))
* fix useInstillForm field's description tooltip break words issue
([#937](#937))
([6e43839](6e43839))
* **pipeline-builder:** fix newly added nodes is behind old nodes
([#939](#939))
([6824bb1](6824bb1))
* **pipeline-builder:** fix semi-structured/json at start operator not
obey the protocol
([#962](#962))
([bd624a6](bd624a6))
* **pipeline-builder:** fix smart-hint list not align to left when the
key is too long
([#938](#938))
([31ea1c6](31ea1c6))
* **pipeline-builder:** fix task description not react to the selected
task ([#944](#944))
([7e600f8](7e600f8))
* **pipeline-builder:** fix the reference header title have tooltip and
is able to copy
([#958](#958))
([6214838](6214838))
* **pipeline-builder:** prevent user create duplicated field on start
and end operator
([#963](#963))
([a96b0a0](a96b0a0))

### Miscellaneous

* add the missing return button in the subscription form (They are
already in the design handover)
([#932](#932))
([03ef163](03ef163))
* **user-profile:** add id to user profile bio for better URL navigation
([#931](#931))
([3bcd905](3bcd905))
* componentize the UploadAvatarFieldWithCrop
([#953](#953))
([62cbb1b](62cbb1b))

</details>

<details><summary>@instill-ai/design-system: 0.64.0</summary>

##
[0.64.0](https://github.com/instill-ai/console/compare/@instill-ai/design-system-v0.63.0...@instill-ai/design-system-v0.64.0)
(2024-02-15)


### Features

* **pipeline-builder:** support video/multiple-video in pipeline builder
([#943](#943))
([2680f70](2680f70))


### Miscellaneous

* **design-system:** add storybook stories for colors
([#945](#945))
([f4d52d8](f4d52d8))
</details>

<details><summary>@instill-ai/toolkit: 0.81.0</summary>

##
[0.81.0](https://github.com/instill-ai/console/compare/@instill-ai/toolkit-v0.80.3...@instill-ai/toolkit-v0.81.0)
(2024-02-15)


### Features

* adapt new backend breaking changes about mgmt backend
([#940](#940))
([3351262](3351262))
* add SubscriptionStatus to sdk
([#964](#964))
([f5e67ba](f5e67ba))
* add trial_end field into StripeSubscriptionDetail
([#965](#965))
([7b7324b](7b7324b))
* **auto-gen-form:** handle Airbyte form and instill data form
separately ([#956](#956))
([23ce0eb](23ce0eb))
* componentize the UploadAvatarFieldWithCrop
([#953](#953))
([62cbb1b](62cbb1b))
* namananand/ins 3605 add realease switch dropdown, share and delete
button to view pipeline page
([#942](#942))
([a96bf9f](a96bf9f))
* **pipeline-builder:** copy & paste full reference with ${} instead of
path only ([#967](#967))
([231ac2f](231ac2f))
* **pipeline-builder:** implement the layered flow of smart hint
([#934](#934))
([69dc912](69dc912))
* **pipeline-builder:** implement the new array data type label design
([#957](#957))
([0c6ef4e](0c6ef4e))
* **pipeline-builder:** replace semi-structured/object with
semi-structured/json on start operator
([#954](#954))
([df71434](df71434))
* **pipeline-builder:** support hinting other type that can be
stringified ([#949](#949))
([c0c8892](c0c8892))
* **pipeline-builder:** support video/multiple-video in pipeline builder
([#943](#943))
([2680f70](2680f70))
* **pipeline-builder:** unify the onEdit and onDelete item on both start
and end operator
([#936](#936))
([d70120f](d70120f))
* support the backend breaking changes of icon path
([#959](#959))
([e7d7ad3](e7d7ad3))


### Bug Fixes

* **dashboard:** chart yAxis calculation
([#929](#929))
([56e9d11](56e9d11))
* fix connector definition not correctly update after user picking up
the existing connector
([#935](#935))
([08ef854](08ef854))
* fix console wrongly warn field not supporting multiple references
([#948](#948))
([3c029e4](3c029e4))
* fix create pipeline dialog use the wrong entity as query param
([#951](#951))
([20d0793](20d0793))
* fix dashboard font-family issue
([#955](#955))
([4028d53](4028d53))
* fix not correctly redirect user to 404 page when the entity is not
found ([#950](#950))
([898acba](898acba))
* fix not redirect non exist user page to 404
([#941](#941))
([86a823f](86a823f))
* fix reference data type tags are not human readable issue
([#960](#960))
([55d315c](55d315c))
* fix stripe subscription detail is not nullable issue
([#966](#966))
([78d903b](78d903b))
* fix the button title for multiple videos uploader at start operator
([#961](#961))
([29a25ab](29a25ab))
* fix the wrong delete organization function parameter
([#952](#952))
([8e2d89f](8e2d89f))
* fix the wrong organization profile object
([#946](#946))
([1f9780b](1f9780b))
* fix useInstillForm field's description tooltip break words issue
([#937](#937))
([6e43839](6e43839))
* **pipeline-builder:** fix newly added nodes is behind old nodes
([#939](#939))
([6824bb1](6824bb1))
* **pipeline-builder:** fix semi-structured/json at start operator not
obey the protocol
([#962](#962))
([bd624a6](bd624a6))
* **pipeline-builder:** fix smart-hint list not align to left when the
key is too long
([#938](#938))
([31ea1c6](31ea1c6))
* **pipeline-builder:** fix task description not react to the selected
task ([#944](#944))
([7e600f8](7e600f8))
* **pipeline-builder:** fix the reference header title have tooltip and
is able to copy
([#958](#958))
([6214838](6214838))
* **pipeline-builder:** prevent user create duplicated field on start
and end operator
([#963](#963))
([a96b0a0](a96b0a0))


### Miscellaneous

* add the missing return button in the subscription form (They are
already in the design handover)
([#932](#932))
([03ef163](03ef163))
* **instill-hub:** add visibility all label to dropdown
([#947](#947))
([1ba36a0](1ba36a0))
* **user-profile:** add id to user profile bio for better URL navigation
([#931](#931))
([3bcd905](3bcd905))
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants